<template>
  <div class="detailsHer_box">
    <!-- 完成/未完成工单详情 -->

    <!-- 个人信息 -->
    <div class="detailsHer">
      <img :src="workdetail.water_user.water_avatar == '' ? '/static/images/avatar.png' : workdetail.water_user.water_avatar" alt="头像" />
      <div class="detailsHer_name">
        <span>接单师傅：{{workdetail.water_user.water_user_name}}</span>
        <span>联系电话：{{workdetail.water_user.water_mobile}}</span>
      </div>
    </div>

    <!-- 工单详情 -->
    <ul class="G_details">
      <li>
        <span>工单号:</span>
        <span>{{workdetail.number}}</span>
      </li>
      <li>
        <span>工种类别：</span>
        <span>{{workdetail.title}}</span>
      </li>
      <li>
        <span>工单费用：</span>
        <span v-if="priceNum == 0" :style="status != 5 ? 'padding-left:40rpx' : '' ">¥{{workdetail.door_fee}}</span>
        <input v-else type="text" style="padding-left:70rpx" placeholder="请输入金额" :value='workdetail.door_fee' @input="onKeyInput" />
        <span v-if="status != 5" class="price_css" @click="priceClick()">修改金额</span>
        <span v-if="priceNum == 1" class="price_css" style="margin-left:20rpx" @click="qxClick()">取消</span>
      </li>
      <li>
        <span>预约时间：</span>
        <span>{{workdetail.add_time}}</span>
      </li>
      <li>
        <span>预约地址：</span>
        <span>{{workdetail.address}}</span>
      </li>
      <li>
        <span>情况描述：</span>
        <span>{{workdetail.excerpt}}</span>
      </li>
    </ul>
    <!-- 维修图片 -->
    <div class="repairimg">
      <div class="repairimgname">维修图片</div>
      <div class="repair_img" v-if="workdetail.images.length > 0">
        <img v-for="(imgItem,index) in workdetail.images" :key="index" :src="imgItem" alt="图片" />
      </div>
      <div class="tishi" v-else>暂无维修图片</div>
      <!-- <img v-else src="" /> -->
      <div>
        <span>备注:</span>
        <span>{{workdetail.remark == '' ? '客户无备注' : workdetail.remark}}</span>
      </div>
    </div>

    <!-- 服务前图片 -->
    <div class="serviceFront">
      <div class="servicename">服务前图片</div>
      <div class="serviceimg" v-if="status != 5">
        <div v-if="imageFile1 == 'undefined' || !imageFile1" @tap="chooseImg1()">
          <div>
            <p class="tup">+</p>
          </div>
        </div>
        <div v-else>
          <img @tap="chooseImg1()" class="tup" :src="imageFile1" alt="" />
          <!-- <span>服务前图片</span> -->
        </div>

        <div v-if="imageFile2 == 'undefined' || !imageFile2" @tap="chooseImg2()">
          <div>
            <p class="tup">+</p>
          </div>
        </div>
        <div v-else>
          <img @tap="chooseImg2()" class="tup" :src="imageFile2" alt="" />
          <!-- <span>服务前图片</span> -->
        </div>
      </div>
      <div class="serviceimg" v-else>
        <div>
          <img v-if="imageFile1" class="tup" :src="imageFile1" alt="" />
          <!-- <span>服务前图片</span> -->
        </div>
        <div>
          <img v-if="imageFile2" class="tup" :src="imageFile2" alt="" />
          <!-- <span>服务前图片</span> -->
        </div>
      </div>
    </div>

    <!-- 服务后图片 -->
    <div class="serviceAfter">
      <div class="servicename">服务后图片</div>
      <div class="serviceimg" v-if="status != 5">
        <div v-if="imageFile3 == 'undefined' || !imageFile3" @tap="chooseImg3()">
          <div>
            <p class="tup">+</p>
          </div>
        </div>
        <div v-else>
          <img @tap="chooseImg3()" class="tup" :src="imageFile3" alt="" />
          <!-- <span>服务后图片</span> -->
        </div>

        <div v-if="imageFile4 == 'undefined' || !imageFile4" @tap="chooseImg4()">
          <div>
            <p class="tup">+</p>
          </div>
        </div>
        <div v-else>
          <img @tap="chooseImg4()" class="tup" :src="imageFile4" alt="" />
          <!-- <span>服务后图片</span> -->
        </div>
      </div>
      <div class="serviceimg" v-else>
        <div>
          <img v-if="imageFile3" class="tup" :src="imageFile3" alt="" />
          <!-- <span>服务后图片</span> -->
        </div>
        <div>
          <img v-if="imageFile4" class="tup" :src="imageFile4" alt="" />
          <!-- <span>服务后图片</span> -->
        </div>
      </div>
    </div>

    <!-- but -->
    <div v-if="status != 5" class="detailsBut" @tap="detailsBut()">确定完成</div>
    <div v-else class="detailsBut active">已完成</div>
  </div>
</template>

<script>
import Index from '../balance/index.vue';
export default {
  props: {},
  data() {
    return {
      id: '',
      status: 0,
      workdetail: {
        add_time: "2020.09.29 17:45:43",
        address: "湖北省武汉市",
        appointment_time: "2020.08.20 09:30:00",
        cate_id: 10,
        door_fee: "0.00",
        excerpt: "水龙头故障、混水龙头",
        fenishi_time: "1970.01.01 08:00:00",
        id: 158,
        images: [],
        mobile: "18621572065",
        number: "HQ20200929157",
        remark: "",
        title: "给水维修",
        uid: 26,
        water_user: {
          water_avatar: "https://hsh.yuranai.cn/uploads/store/commom/20201123/98e684ca49da45267071acf04c912839.png",
          water_mobile: "13564603138",
          water_user_name: "武汉昱然1"
        },
        water_user_id: 26,
        woker_add_time: 1606268146
      },
      imageFile1: '',
      imageFile2: '',
      imageFile3: '',
      imageFile4: '',
      inputPrice: '',
      priceNum: 0,
    }
  },
  onReady() {
    this.imageFile1 = ''
    this.imageFile2 = ''
    this.imageFile3 = ''
    this.imageFile4 = ''
    this.request({
      url: this.baseUrl + '/api/wechatapp/workdetail',
      data:{
        id: this.id
      },
      method: 'GET',
    })
    .then(result=>{
      if(result.status == 200){
        this.workdetail = result.data
        this.imageFile1 = this.workdetail.image_start[0]
        this.imageFile2 = this.workdetail.image_start[1]
        this.imageFile3 = this.workdetail.image_end[0]
        this.imageFile4 = this.workdetail.image_end[1]
        // console.log(this.workdetail)
        // console.log(this.imageFile1)
      } else {
        return false
      }
    })
  },
  onLoad(option) {
    this.id = option.id
    this.status = option.status
    wx.setNavigationBarTitle({
      title: "工作详情",
    });
  },
  onShow() {
    // /api/wechatapp/workdetail
    
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    onKeyInput: function(event) {
      this.inputPrice = event.target.value
    },
    /** 服务前照片 */
    chooseImg1: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit1()
        }
      })
    },
    formSubmit1: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile1 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    chooseImg2: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit2()
        }
      })
    },
    formSubmit2: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile2 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },

    /** 服务后照片 */
    chooseImg3: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit3()
        }
      })
    },
    formSubmit3: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile3 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    chooseImg4: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit4()
        }
      })
    },
    formSubmit4: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile4 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    detailsBut() {
      // /api/wechatapp/workbegin
      // console.log(this.imageFile1)
      if (this.imageFile1 == undefined && this.imageFile2 == undefined) {
        wx.showToast({
          title: "请上传服务前的图片",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (this.imageFile3 == undefined && this.imageFile4 == undefined) {
        wx.showToast({
          title: "请上传服务后的图片",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      this.request({
        url: this.baseUrl + '/api/wechatapp/workfenishi',
        data:{
          id: this.id,
          thumbnail_start: (this.imageFile1 == undefined ? "" : this.imageFile1) + (this.imageFile2 == undefined ? "" : ",") + (this.imageFile2 == undefined ? "" : this.imageFile2),
          thumbnail: (this.imageFile3 == undefined ? "" : this.imageFile3) + (this.imageFile4 == undefined ? "" : ",") + (this.imageFile4 == undefined ? "" : this.imageFile4)
        },
        method: 'POST',
      })
      .then(result=>{
        if(result.status == 200){
          wx.showToast({
            title: "工单已完成",
            icon: "success",
            duration: 1000,
            success:function(){
              setTimeout(function() {
                wx.navigateBack({
                  //返回上一页
                  delta: 1,
                });
              }, 1000)
            }
          })
          return true
        } else {
          return false
        }
      })

    },
    priceClick() {
      if(this.priceNum == 0){
        this.priceNum = 1     
        this.inputPrice = this.workdetail.door_fee     
      }else{
        if (!this.inputPrice.trim()) {
          wx.showToast({
            title: "价格不能为空",
            icon: "none",
            duration: 2000,
          });
          return false;
        }
        this.request({
          url: this.baseUrl + '/api/wechatapp/finalWaterMoeny',
          data:{
            id: this.id,
            money: this.inputPrice
          },
          method: 'POST',
        })
        .then(result=>{
          if(result.status == 200){
            wx.showToast({
              title: "修改成功",
              icon: "success",
              duration: 1000
            })
            this.workdetail.door_fee = this.inputPrice
            return true
          } else {
            wx.showToast({
              title: result.msg,
              icon: "none",
              duration: 1000
            })
            return false
          }
        })
        this.priceNum = 0
      }
    },
    qxClick() {
      if(this.priceNum == 0){
        this.priceNum = 1  
      }else{
        this.priceNum = 0
      }
    }
  },
  components: {Index},
};
</script>

<style scoped >
.detailsHer {
  display: flex;
  align-items: center;
  background: #1677ff;
  padding: 40rpx;
}
.detailsHer_name {
  display: flex;
  flex-direction: column;
  color: white;
}
.detailsHer_name span {
  margin-bottom: 15rpx;
  margin-left: 40rpx;
}
.detailsHer_name > span:nth-child(2) {
  font-size: 25rpx;
}
.detailsHer img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #fff;
}
.G_details {
  background: #ffffff;
  margin: 20rpx 0;
  font-size: 25rpx;
}
.G_details li {
  display: flex;
  padding: 20rpx;
}
.G_details li > span:nth-child(1) {
  flex: 3;
  color: #666666;
}
.G_details li > input {
  flex: 7;
  height: 34rpx;
  min-height: 34rpx;
  line-height: 34rpx;
}
.G_details li > span:nth-child(2) {
  flex: 7;
  color: #999999;
}
.repairimg {
  background: #ffffff;
  padding: 20rpx;
}
.repair_img {
  width: 100%;
  height: auto;
}
.repair_img img {
  margin-right: 20rpx;
}
.repairimg img {
  width: 144rpx;
  height: 144rpx;
  background-color: #eee;
}
.repairimg > div:nth-child(1) {
  margin: 20rpx 0;
}
.repairimg > div:nth-child(3) {
  margin: 20rpx 0;
  padding: 20rpx 0;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
}
.repairimg > div:nth-child(3) > span:nth-child(1) {
  flex: 3;
}
.repairimg > div:nth-child(3) > span:nth-child(2) {
  flex: 7;
  color: #999999;
}
.servicename {
  margin: 30rpx 20rpx;
}
.tup {
  width: 144rpx;
  height: 144rpx;
  line-height: 128rpx;
  text-align: center;
  border: 2rpx solid #cccccc;
  font-size: 121rpx;
  color: #cccccc;
}
/* .serviceimg img {
  width: 128rpx;
  height: 128rpx;
  background-color: #EEE;
  margin: 30rpx;
} */
.serviceimg {
  background: #ffffff;
  display: flex;
}
.serviceimg > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx;
}
.detailsBut {
  padding: 20rpx 0;
  text-align: center;
  background: #1677ff;
  color: #ffffff;
  margin: 60rpx 40rpx;
  border-radius: 10rpx;
}
.detailsBut.active {
  background-color: #999;
}
.price_css {
  color: #1677ff;
}
</style>
